<template>
  <div id="app">
    <Musics :item="item" 
    v-for="item of playlists" :key="item.id" />
  </div>
</template>

<script lang="ts">
import { Component, Vue,Provide } from 'vue-property-decorator';//
import Musics from './components/Musics.vue';                   //
import axios from 'axios'

@Component({              //
  components: {
    Musics,
  },
})
export default class App extends Vue {
  @Provide() playlists:any = "playlists";


  mounted(): void {
    axios.get("http://localhost:4000/top/playlist?cat=华语").then((res:any)=>{
      
      this.playlists = res.data.playlists;
      console.log(this.playlists);
    })
  }
}
</script>

<style>
#app{
    display: grid;
    align-items: top;
    justify-content: center;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 20px;
  }
</style>
